<template>
  <div class="dashboard-container">
    <!-- {{require('https://api.oick.cn/dutang/api.php') }} -->
    <!-- <h1>备忘录</h1> -->
    <!-- <h4>个人openid : {{$store.getters.openid}}</h4> -->
    <!-- <div class="memorandum_box">

      <div v-for="data in ToDoList_data" :key="data" class="memorandum">
        <div class="memorandum_title">
          <input style="text-align: center;" @blur="ToDoListUpdate($event,data)" :value="data.attributes.name" type="text">
          <i class="el-icon-delete" @click="ToDoListDelete(data)"></i>
          <i class="el-icon-plus" @click="todoList_add"></i>
          <i class="el-icon-share" @click="open(data)"></i>
        </div>

        <div v-if="data.memorandum" class="memorandum_if">
          <div :class="{showBtn:data.memorandum.ifTrue == 0}" @click="()=>{data.memorandum.ifTrue = 0;ToDoList_data = [...ToDoList_data] } ">未完成</div>
          <div :class="{showBtn:data.memorandum.ifTrue == 1}" @click="()=>{data.memorandum.ifTrue = 1;ToDoList_data = [...ToDoList_data] } ">已完成</div>
        </div>
        <div v-if="data.memorandum" @click.stop="add(data,data.memorandum)" class="memorandum_list">

          <div v-show="data.memorandum.ifTrue == i.attributes.iFaccomplish"  :key="i" @click.stop='memorandumUpdate2' v-for="i in data.memorandum.list" class="memorandum_item">

            <div @click.stop="memorandumUpdate($event,i,{iFaccomplish:i.attributes.iFaccomplish?0:1},'attributes')" class="memorandum_radio" :class="{ifTrue:i.attributes.iFaccomplish}">
              <i v-if="i.attributes.iFaccomplish" class="el-icon-check"></i>
            </div>
            <div class="memorandum_text">
              <input @blur="memorandumUpdate($event,i)" :value="i.attributes.content" type="text">
              <div @click="deleteFun(i)" class="memorandum_delete">
                删除
              </div>
            </div>
          </div>

          <div v-if="data.memorandum && data.memorandum.ifAdd" class="memorandum_item">
            <div class="memorandum_radio">
            </div>
            <div class="memorandum_text">
              <input autofocus ref='memorandum_input' @blur="memorandum_blur($event,data.id)" type="text">
            </div>
          </div>

        </div>
      </div>

    </div> -->




    <h1>网站开发的辅助功能说明：（点击左上按钮）</h1>
    <br>

    <el-row :gutter="20">
      <el-col :span="11">

        <div class="lin2">
          <h1>1. Excel 转 通用脚本内容  ：</h1>
          <br>
          <div>
            <div>
              点击右上根据你传的Excel，显示在表格中，然后生成相应的通用脚本内容，在左上方的查看相应的的代码，直接复制到通用脚本里面就能直接使用了
            </div>
            <div>
                ps: 飞书在线编译，不需要导出在进行保存导入操作！！！（需加入罗布随便吧群组，联系管理员）
            </div>
            <div>
                ps: 受保护的视图怎么取消 1. 点击打开excel文档，依次点击，界面左上角的文件》选择》信任中心》添加新位置》选择你平时导出位置》完成取消
            </div>
            <div>
                ps: 指定的key(哪一行的内容作为键值,不指定键值就是序列（1、 2、 3）)
            </div>
            <div>
                ps: 建议和腾讯文档连用（腾讯文档导出文件识别为空的时候，请打开导出文件确认无误后 ctrl + s一下，再次使用）
            </div>
            <br>
            <h3>文件模板：</h3>
            <br> <img :src="img" alt="" srcset="">
            <br>
            <h3>输出：</h3>
            <div class="textarea_box" v-html="text" style="white-space: pre-wrap;"></div>
          </div>
        </div>

      </el-col>
      <el-col :span="11">

        <div class="lin2">
          <h1>2. 翻译脚本 ：</h1>
          <br>
          <div>
            只翻译注释内容，直接把人家全部脚本复制过来，进行翻译
          </div>
          <div>
              ps: '--'后面的进行翻译其他的不处理
          </div>

          <h3>如：</h3>

          <div class="textarea_box" v-html="fanyi01" style="white-space: pre-wrap;">

          </div>
          <h3>翻译为：</h3>
          <div class="textarea_box" v-html="fanyi02" style="white-space: pre-wrap;">

          </div>

        </div>

      </el-col>
    </el-row>

    <br>
    <br>
    <br>
    <br>
    <br>

    <h2>资源分享</h2>
    <div class="lin2 textBox">
      <br>
      <h3>开发相关网站分享</h3>
      <br>
      <div>
        网站分享 | <a href="https://www.aigei.com/"  target="_blank"> 爱给网 ：游戏资源、模型、图标、图片、音乐、音效。</a>
      </div>
      <div>
        网站分享 | <a href="https://www.mixamo.com/#/"  target="_blank"> mixamo网站 ：游戏模型动作，走、攻击、跑各种。</a>
      </div>
      <div>
        网站分享 | <a href="https://www.iconfont.cn/"  target="_blank"> Iconfont-阿里巴巴矢量图标库 ：各种图标。</a>
      </div>
      <div>
        网站分享 | <a href="https://assetstore.unity.com/"  target="_blank"> unity 资源商店 </a>
      </div>
      <div>
        网站分享 | <a href="https://www.unrealengine.com/marketplace/zh-CN/store"  target="_blank"> 虚幻商城</a>
      </div>
      <br>
      <h3>罗布乐思学习资源</h3>
      <br>
      <!-- https://yo8pp8ytog.feishu.cn/docs/doccnkVg0AFCgs0xTdZ7wiPbQvh?from=from_copylink -->
      <div>
        学习资源 | <a href="https://www.bilibili.com/video/BV1Ym4y1D7d4?spm_id_from=333.999.0.0"  target="_blank"> 小陈老师的独家课程之编辑器的下载与使用 </a>
      </div>
      <div>
        学习资源 | <a href="https://m.bilibili.com/video/BV16J411v7f7"  target="_blank"> 游戏开发教程之程序喵 </a>
      </div>
      <div>
        学习资源 | <a href="https://wwu.lanzout.com/iSHGWyxf7aj" target="_blank"> 开源特效下载 </a>
      </div>
      <div>
        学习资源 | <a href="https://wwu.lanzout.com/i4BjZyxf7gf" target="_blank"> 效果库V1.1下载 </a>
      </div>
      <div>
        学习资源 | <a href="https://forum.robloxdev.cn/t/topic/767" target="_blank"> 超级入门知识01 </a>
      </div>
      <div>
        学习资源 | <a href="https://forum.robloxdev.cn/t/topic/770" target="_blank"> 超级入门知识02 </a>
      </div>
      <div>
        <!-- src\assets\xgk.zip -->
        学习资源 | <a href="https://yo8pp8ytog.feishu.cn/docs/doccnkVg0AFCgs0xTdZ7wiPbQvh?from=from_copylink" target="_blank"> New Bee大佬对罗布现状分析 </a>
      </div>
      <div>
        <!-- src\assets\xgk.zip -->
        学习资源 | <a href="https://github.com/Aidaren/_RS_Easy-BezierCurve/blob/main/Easy-BezierCurve.lua" target="_blank"> 挨打人 贝塞尔曲线模块Version1.1 </a>
      </div>
      <div>
        查询方法 | 想要做3d特效 可以去工具箱搜vfx 用代码、tween去控制
      </div>
      <div>
        <!-- src\assets\xgk.zip -->
        知识点 | <a href="https://developer.roblox.com/zh-cn/api-reference/enum/HumanoidStateType" target="_blank"> 角色所处状态（跑走跳飞行落下） </a>
      </div>
      <div>
        <!-- src\assets\xgk.zip -->
        知识点 | <a href="https://developer.roblox.com/zh-cn/api-reference/function/RunService/IsEdit" target="_blank"> 运行位置是否为服务器、客户端、Studio 等 </a>
      </div>
    </div>


    <br>
    <br>
    <br>
    <br>
    <br>


    <el-row :gutter="20">
      <!-- <el-col :span="11">

        <div class="lin2">
          <h1>3. 项目画板 ：</h1>
          <br>
          <div>
          根据你游戏规划画在上面,存在数据库里,每一次都可以重新画,不用每次画好在保存成图片给别人看了(咱这个保存成图片支持的)
          </div>
          <div>
          ① 新建项目: 直接画好,起个名字最好复杂点,然后点击上传
          </div>
          <div>
          ② 读档: 下拉框选择之前写的名字
          </div>
          <div>
          ③ 存储: 你读存档好,修改完之后直接点击存储,就可以把你画好的这个覆盖之前那个
          </div>
          <div>
          ④ 工具栏: 各种形状、删除、画布移动（移动画布） ，画布锁定（移动好画布，锁定开始画画） ，挪移（画的东西的挪动）
          </div>
        </div>

      </el-col> -->
      <!-- <el-col :span="11">
        <div class="lin2">
          <h1>4. 项目进度控制 ：</h1>
          <br>
          <div>
          简单的甘特图，根据你的进度以及策划来弄
          </div>
        </div>
      </el-col> -->
    </el-row>

    <br>
    <br>
    <br>
    <br>
    <!-- <h1><a href="http://www.dreamvillage.work/#/dashboard"  target="_blank"> 请使用 》》新网址《《 </a> </h1> -->


  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import XLSX from 'xlsx'
import axios from 'axios'

import img from '@/assets/zhuShi.png'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return{
      memorandum:null,
      ToDoList:[],
      ToDoList2:[],
      ToDoList_data:[],

      show:'',
      input:'',
      textarea:'',
      htmlData:[],
      img,
      excelFile:null,
      fanyi01:`            
            -- This is the test comment content.
            if test then
              return true
            end`,
      fanyi02:`            
            -- 这是测试注释内容。
            -- This is the test comment content.
            if test then
              return true
            end`,
      text:`
local module = {}

	-- module['注释'] = {id="id",type="类型",name="名称",value="值"}

	module[1] =
				{id=1,type="球",name="篮球",value=122}

	module[2] =
				{id=2,type="工具",name="打火机",value={100,1,0}}

	module[3] =
				{id=3,type="装饰",name="鹿角帽子",value=150}

	module[4] =
				{id=4,type="球",name="乒乓球",value=5}

return module
      `
    }
  },
  mounted(){
    // this.getData()
    this.pushDjt('https://api.oick.cn/dutang/api.php','Sentence','温馨提示')
    this.pushDjt('https://api.oick.cn/dog/api.php','lickingDogQuotes','舔狗语录')
    // let shi = returnCitySN['cname'].split('省')[1].split('市')[0]
    // console.log(' ------- ip ------- ',returnCitySN['cip'] + ' ' + shi)
    // console.log('uuid',this.uuid())

    // this.todoList_get()
    // this.todoList_gx_get()
  },
  methods:{
    open(todo) {
      console.log(todo)
      this.$prompt('请输入分享人openid，用,分开。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: todo.attributes.collaborationist && todo.attributes.collaborationist.join(',') || '',
      }).then(({ value }) => {
        // this.$message({
        //   type: 'success',
        //   message: '你的邮箱是: '
        // });
        console.log(value.split(','))
        this.ToDoListUpdate(null,todo,{
          collaborationist:value.split(',')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    // 这个可以指定长度和基数。比如// 8 character ID (base=2)uuid(8, 2)  //  "01001010"// 8 character ID (base=10)uuid(8, 10) // "47473046"// 8 character ID (base=16)uuid(8, 16) // "098F4D35"
    add(todo,memorandum){
      console.log('add ---- ',this.memorandum)
      // if(this.memorandum == null){
      //   this.memorandum = {
      //     ifTrue:false,
      //     list:[]
      //   }
      // }
      // todo.memorandum = {
      //   ...todo.memorandum,
      //   ifAdd:true
      // }

      for (let s of this.ToDoList_data) {
        if(todo.id == s.id){
          // console.log('更新到表格',s.id)
          s.memorandum = {
            ...s.memorandum,
            ifAdd:true
          }
        }
      }

      this.ToDoList_data = [...this.ToDoList_data]
      setTimeout(()=>{
        console.log(this.$refs)
        this.$refs.memorandum_input[0].focus()
      },100)
    },
    memorandum_blur(e,todoId){
      // console.log(' memorandum_blur ',e.srcElement.value)
      // console.log(' memorandum_blur ',todoId)
      if(e.srcElement.value){
        this.addMemorandum(e.srcElement.value,todoId)
      }

      for (let s of this.ToDoList_data) {
        if(todoId == s.id){
          // console.log('更新到表格',s.id)
          s.memorandum = {
            ...s.memorandum,
            ifAdd:false
          }
        }
      }
      this.ToDoList_data = [...this.ToDoList_data]

    },

    deleteFun(data){
      this.$Leancloud.dataRequest.deleteFun(data.id,'memorandum',this).then(res=>{
        this.getData(data.attributes.todoId)
      })
    },
    memorandumUpdate2(e){
      // console.log('memorandumUpdate2',e)
    },
    memorandumUpdate(e,data,attributes,type){
      console.log('memorandumUpdate',e,data,attributes,type)
      // iFaccomplish
      if(type == 'attributes'){
        this.$Leancloud.dataRequest.update(data.id,{
          ...data.attributes,
          ...attributes
        },'memorandum',this).then(res=>{
          this.getData(data.attributes.todoId)
        })
      }

      if(e.srcElement.value != data.attributes.content ){
        console.log('数据更新')
        this.$Leancloud.dataRequest.update(data.id,{
          ...data.attributes,
          content:e.srcElement.value
        },'memorandum',this).then(res=>{
          this.getData(data.attributes.todoId)
        })
      }
    },
    // 更改标题
    ToDoListDelete(data){
      if (data.type == 1) {
        this.$Leancloud.dataRequest.deleteFun(data.id,'ToDo_list',this).then(res=>{
          this.getData(data.id)
        })
      } else if(data.type == 2){
        let collaborationist = data.attributes.collaborationist

        collaborationist = collaborationist.some(role => {
             return role != this.$store.getters.openid
        })

        this.ToDoListUpdate(null,data,{
          collaborationist:collaborationist || []
        })
      }
    },
    // 更改标题
    ToDoListUpdate(e,data,data2){
      if (data2) {
        this.$Leancloud.dataRequest.update(data.id,{
          ...data.attributes,
          ...data2
        },'ToDo_list',this).then(res=>{
          this.todoList_get()
          this.todoList_gx_get()
        })
      }

      if(e && e.srcElement.value != data.attributes.name ){
        console.log('ToDoListUpdate 数据更新',data)
        this.$Leancloud.dataRequest.update(data.id,{
          ...data.attributes,
          name:e.srcElement.value
        },'ToDo_list',this).then(res=>{
          if(data.type == 1){
            this.todoList_get()
          }else{
            this.todoList_gx_get()
          }
        })
      }
    },
    // 备注初始化
    todoList_fun(){
      // 自己的 1 共享的 2
      for (let s of this.ToDoList) {
        s.type = 1
      }
      // 共享的
      for (let s of this.ToDoList2) {
        s.type = 2
      }
      let list = [...this.ToDoList,...this.ToDoList2]
      this.ToDoList_data = list
      console.log('备注所属表格',this.ToDoList_data)
      for (let s of this.ToDoList_data) {
        // console.log('查询表格',s.id)
        this.getData(s.id)
      }
    },
    // 添加备注表格
    todoList_add(){
      this.$Leancloud.dataRequest.push({
        creator:this.$store.getters.openid,
        name:'我的备注',
      },'ToDo_list',this).then(res=>{
        this.todoList_get()
      })
    },
    // 自己的备注
    todoList_get(){
      let pageObj = {
        page:1,
        pageSize:100,
        creator:this.$store.getters.openid
      }
      this.$Leancloud.dataRequest.getPage(pageObj,'ToDo_list').then((res)=> {
        console.log('get 自己的备注',res)
        if(res.list.length){
          this.ToDoList = res.list
          this.todoList_fun()
        }else{
          this.todoList_add()
        }

      })
    },
    // 共享备注
    todoList_gx_get(){
      let pageObj2 = {
        page:1,
        pageSize:100,
        collaborationist:this.$store.getters.openid
      }
      this.$Leancloud.dataRequest.getPage(pageObj2,'ToDo_list').then((res)=> {
        console.log('get 共享备注',res)
        this.ToDoList2 = res.list
        this.todoList_fun()
      })
    },
    // 读取数据
    getData(todoId){
      let pageObj = {
        page:1,
        pageSize:100,
        todoId
      }
      // console.log('查询数据',todoId)
      // projectArtboard memorandum
      this.$Leancloud.dataRequest.getPage(pageObj,'memorandum').then((res)=> {
        console.log(todoId,'查询到的todo数据',res)

        for (let s of this.ToDoList_data) {
          if(todoId == s.id){
            console.log('更新到表格',s.id)
            s.memorandum = {
              list:res.list,
              ifTrue:false,
            }
          }
        }

        this.ToDoList_data = [...this.ToDoList_data]
        console.log('this.ToDoList_data',this.ToDoList_data)
      })
    },

    addMemorandum(content,todoId){
      this.$Leancloud.dataRequest.push({
        creator:this.$store.getters.openid,
        todoId,
        content,
        iFaccomplish:0,
      },'memorandum',this).then(res=>{
        this.getData(todoId)
      })
    },

    async pushDjt(url,calss,title) {
      let str = await axios.get(url)
      // console.log('内容',str)
      if(str.status != 200){
        return
      }
      this.$notify({
        title: title,
        message: str.data,
        type: 'success',
        duration: 0
      });

      // this.$Leancloud.dataRequest.getPage({
      //   content:str
      // },calss).then((res)=> {
      //   // console.log('查询到的数据',res)
      //   if (res.list.length == 0) {
      //     this.$notify({
      //       title: title,
      //       message: str.data,
      //       type: 'success',
      //       duration: 0
      //     });
      //     this.$Leancloud.dataRequest.push(
      //       {
      //         'content':str.data
      //       },
      //       calss
      //     )
      //   }
      // })

    }


  }
}
</script>

<style lang="scss" scoped>
  .memorandum_box{
    display: flex;
    flex-wrap: wrap;
  }
  .showBtn{
    transition: .8s cubic-bezier(0.23, 1, 0.32, 1);
    color: #00ff00;
    font-size: 19px;
  }
  .memorandum{
    background-color: rgb(164,168,174);
    width: 30%;
    height: 600px;
    margin:20px 20px 60px;
    padding: 3px 5px;
    color: #fff;

    display: flex;
    flex-direction: column;

    // pointer-events:none;
    div{
    }

    input{
      display: block;
      width: calc(100% - 60px);
      background-color: transparent;
      color: #fff;
      border: 0px;
    }
    .memorandum_title{
      display: flex;
      width: 100%;
      text-align: center;
      margin: 10px 0;
      input{
        flex: 1;
        margin-right: 10px;
      }
      i{
        margin-left: 10px;
      }
    }
    .memorandum_if{
      display: flex;
      align-items: center;
      margin: 10px 0;
      >div{
        text-align: center;
        flex: 1;
        padding: 5px;
      }
      >div:nth-child(1){
        border-right: 1px solid #fff;
      }
    }
    .memorandum_list{
      flex: 1;
      overflow-y: scroll;
      >div{
        display: flex;
        align-items: center;
        width: 100%;
        margin: 5px 0;
      }
    }
    .memorandum_item{
      padding: 5px 0;
    }
    .memorandum_item:hover{
      background-color: rgba(255, 255, 255, 0.3);
      .memorandum_delete{
        display: inline-block;
      }
    }
    .memorandum_radio{
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid #fff;
      background-color: rgba(255, 255, 255, 0.5);
      margin: 0px 10px;
      text-align: center;
    }
    .memorandum_radio.ifTrue{
      background-color: rgb(14,158,70);
    }
    .memorandum_text{
      display: flex;
      align-items: center;
      flex: 1;
      .memorandum_delete{
        display: none;
        color: red;
        text-align: center;
        width: 60px;
      }
    }
  }
.el-col{
  background-color: #fff;
  box-shadow: 0 0 10px #ccc;
  border-radius: 12px;
  margin: 10px;
  padding: 10px;
  img{
    width: 100%;
  }
}
.lin2{
  height: 100%;
}
.textBox>div{
  color: #666;
}
.lin2>div{
  line-height: 1.8;
}
h1{
  font-size: 28px;
}
h2{
  font-size: 24px;
}
h3{
  font-size: 18px;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.excelTitle{
  color:cadetblue;
}
</style>
